<template>
  <view class="page">
    <image
      :lazy-load="true"
      class="bg"
      :src="imgBaseUrlV0 + 'maintenance-record-bg.png'"
      mode="aspectFill"
    ></image>

    <view class="main">
      <view class="title" v-if="equipment !== null">
        <text class="chn">{{ equipment.name }}维护记录</text>
        <text class="en">maintenance record</text>
      </view>

      <view class="maintenance-view" v-if="maintenanceRecords.length !== 0">
        <view
          class="maintenance-record-group"
          v-for="maintenanceRecord in maintenanceRecords"
          :key="maintenanceRecord.id"
        >
          <view class="info" @click="toggleFold(maintenanceRecord)">
            <view class="check-date-view">
              <image
                :lazy-load="true"
                class="check-date-icon"
                :src="imgBaseUrlV0 + 'maintenance-check-date.png'"
                mode="widthFix"
              ></image>
              <text class="check-date"
                >检查日期：{{
                  maintenanceRecord.checkTime
                    ? getDateTime(maintenanceRecord.checkTime)
                    : ""
                }}</text
              >
              <text v-if="!maintenanceRecord.hasException" class="status-normal"
                >正常</text
              >
              <text v-else class="status-error">异常</text>
            </view>
            <u-icon
              class="fold-icon"
              name="arrow-up"
              size="28"
              color="838383"
              v-if="maintenanceRecord.fold"
            ></u-icon>
            <u-icon
              class="fold-icon"
              name="arrow-down"
              size="28"
              color="838383"
              v-else
            ></u-icon>
          </view>
          <view class="maintenance-records" v-show="!maintenanceRecord.fold">
            <view class="maintenance-record">
              <view class="line-info">
                <text class="title">描述</text>
                <text class="value">{{
                  maintenanceRecord.description &&
                  maintenanceRecord.description.length
                    ? ""
                    : "无"
                }}</text>
              </view>
              <view
                class="description"
                v-if="
                  maintenanceRecord.description &&
                  maintenanceRecord.description.length
                "
                >{{ maintenanceRecord.description }}</view
              >
              <view
                class="image-view"
                v-if="maintenanceRecord.attachments.length"
              >
                <image
                  v-for="attachment in maintenanceRecord.attachments"
                  :key="attachment.id"
                  class="image"
                  :src="baseUrl + attachment.imagePath"
                  mode="widthFix"
                  @click="
                    previewImage(
                      maintenanceRecord.attachments.map(
                        (item) => baseUrl + item.imagePath
                      )
                    )
                  "
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="maintenance-view">
        <view class="maintenance-record-group">
          <view class="info">
            <view class="check-date-view">
              <text class="check-date">暂无维护记录！</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDateTime } from "@/common/util.js";
import { getMaintenanceRecords2 } from "@/common/api/maintenance-record.js";

import { imgBaseUrl, imgBaseUrlV0 } from "@/common/config";
export default {
  data() {
    return {
      baseUrl: imgBaseUrl,
      imgBaseUrlV0,
      equipment: null,
      maintenanceRecords: [],
      listQuery: {
        search: null,
        page: 1,
        limit: 20,
        sort: {
          id: "",
        },
        equipmentId: null,
      },
      test: [
        { normal: true, fold: false },
        { normal: false, fold: false },
        { normal: false, fold: true },
      ],
    };
  },
  async onLoad(e) {
    this.init();
    if (e.equipment) {
      this.equipment = JSON.parse(decodeURIComponent(e.equipment));
      this.listQuery.equipmentId = this.equipment.id;
      await this.initData();
    }
  },
  async onReachBottom() {
    this.listQuery.page++;
    await this.getMaintenanceRecords();
  },
  methods: {
    getDateTime,
    init() {
      uni.setNavigationBarTitle({
        title: this.equipment.name + "维护记录",
      });
    },
    async initData() {
      await this.getMaintenanceRecords();
    },
    async getMaintenanceRecords() {
      await getMaintenanceRecords2(this.listQuery).then((response) => {
        const { list, total } = response;
        list.forEach((e) => {
          e.fold = true;
        });
        this.maintenanceRecords.push(...list);
        if (this.listQuery.page === 1) {
          if (this.maintenanceRecords.length !== 0) {
            this.maintenanceRecords[0].fold = false;
          }
        } else if (list.length == 0) {
          this.listQuery.page--;
        }
      });
    },
    // 查看图片
    previewImage(imageSrcs) {
      uni.previewImage({
        current: 0,
        urls: imageSrcs,
      });
    },
    toggleFold(e) {
      e.fold = !e.fold;
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
page,
.page {
  min-height: calc(100vh - var(--window-top));
  background-color: #3f7dff;

  position: relative;
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.main {
  position: relative;
  z-index: 2;

  .title {
    padding-top: 50rpx;
    padding-bottom: 30rpx;
    text-align: center;

    .chn {
      display: block;
      font-size: 32rpx;
      font-weight: 700;
      line-height: 70rpx;
      color: #fff;
    }
    .en {
      display: block;
      font-size: 22rpx;
      line-height: 30rpx;
      color: #889dbf;
    }
  }

  .maintenance-view {
    padding: 30rpx;
  }
  .maintenance-record-group {
    background-color: #fff;
    padding: 30rpx;
    // margin: 30rpx;
    margin-bottom: 30rpx;
    border-radius: 10rpx;

    &:last-child {
      margin-bottom: 0;
    }
    .info {
      display: flex;
      flex-direction: row;

      .check-date-view {
        flex: 1;

        .check-date-icon {
          width: 50rpx;
          vertical-align: middle;
        }
        .check-date {
          padding: 0 20rpx;
          font-size: 30rpx;
          font-weight: 700;
          color: #434343;
        }
        .status-normal,
        .status-error {
          font-size: 24rpx;
          padding: 0 8rpx;
          border: 3rpx solid #000;
          border-radius: 20rpx;
          border-bottom-left-radius: 0;
        }
        .status-normal {
          border-color: #6cca92;
          color: #6cca92;
        }
        .status-error {
          border-color: #f56e56;
          color: #f56e56;
        }
      }
      .fold-icon {
        vertical-align: middle;
      }
    }
    .maintenance-records {
      padding: 20rpx 0;

      .maintenance-record {
        padding: 20rpx;
        padding-left: 30rpx;
        font-size: 28rpx;
        font-weight: 700;
        background-color: #e8edf4;
        color: #636363;
        border-radius: 5rpx;
        margin-bottom: 10rpx;
        position: relative;
        // display: flex;
        // flex-direction: column;

        &:last-child {
          margin-bottom: 0;
        }
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          width: 8rpx;
          height: 30rpx;
          margin-top: -15rpx;
          border-radius: 5rpx;
          background-color: #3bbcba;
        }
        .line-info {
          // flex: 1;

          .title {
            // flex: 1;
          }
          .value {
            float: right;
          }
        }
        .description {
          // flex: 1;
          padding: 10rpx 0;

          overflow: hidden;
          word-break: break-all; /* break-all(允许在单词内换行。) */
          text-overflow: ellipsis; /* 超出部分省略号 */
          display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
          -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
          // -webkit-line-clamp: 3; /** 显示的行数 **/
        }

        .image-view {
          // display: flex;
          // flex-direction: row;
          padding: 20rpx;

          .image {
            // flex: 1;
            width: 100%;
            margin-top: 10rpx;
          }
        }
      }
    }
  }
}
</style>